<template>
  <el-dialog
    title="报警工单详情"
    :visible.sync="dialogWorkVisible"
    :close-on-click-modal="false"
    :lock-scroll="false"
    width="50%"
    :modal-append-to-body="false"
  >
    <div class="dialog-con scroll-bar">
      <div class="d-dialog-title">
        <span class="name">{{ detailInfo.device_name }}</span>
        <span class="number">( {{ detailInfo.device_number }} )</span>
      </div>
      <div class="d-dialog-con">
        <div class="con-info">
          <div class="con-item">
            <span class="title">工单编号</span>
            <div class="val">{{ detailInfo.order_no }}</div>
          </div>
          <div class="con-item">
            <span class="title tright">工单类型</span>
            <div class="val">{{ detailInfo.order_type === 1 ? '维修工单' : '保养工单' }}</div>
          </div>
          <div class="con-item">
            <span class="title tright">工单来源</span>
            <div class="val">故障记录</div>
          </div>
          <div class="con-item">
            <span class="title">合同编号</span>
            <div class="val">{{ detailInfo.project_contract }}</div>
          </div>
          <div class="con-item">
            <span class="title tright">产线编号</span>
            <div class="val">{{ detailInfo.product_line_number }}</div>
          </div>
          <div class="con-item">
            <span class="title tright">产线识别码</span>
            <div class="val">{{ detailInfo.identification_number }}</div>
          </div>
          <div class="con-item">
            <span class="title">所属公司</span>
            <div class="val">{{ detailInfo.customer }}</div>
          </div>
          <div class="con-item">
            <span class="title tright">现场联系人</span>
            <div class="val">{{ detailInfo.contacts }}</div>
          </div>
          <div class="con-item">
            <span class="title tright">联系电话</span>
            <div class="val">{{ detailInfo.contacts_tel }}</div>
          </div>
          <div class="con-item">
            <span class="title">设备地址</span>
            <div class="val">{{ detailInfo.address }}</div>
          </div>
        </div>
        <div class="con-progress">
          <div class="progress-btn">
            <div class="btn-txt">进度追踪</div>
            <div class="btn-line"></div>
          </div>
          <div class="progress-text">
            <div class="progress-item" v-for="(item, index) in stateList" :key="'state_' + index">
              <div class="p-con-state">
                <div class="p-state">{{ stateBarList[item.status - 1] }}</div>
                <div
                  v-show="index < stateList.length - 1"
                  class="p-line"
                  :style="
                    index < stateList.length - 1 && item.operate_content && item.operate_content.length === 0
                      ? 'height: 20px'
                      : ''
                  "
                ></div>
              </div>
              <div class="p-con">
                <div class="p-con-title">
                  <span class="time">{{ item.OperateDate }}</span>
                  <span class="time">{{ item.username }}</span>
                  <span class="text">{{ stateTextList[item.status - 1] }}</span>
                </div>
                <div class="p-con-text" v-if="item.operate_content && item.operate_content.length > 0">
                  <div class="item" v-for="(content, conIndex) in item.operate_content" :key="'cindex_' + conIndex">
                    <span class="title">{{ content.name }}</span>
                    <div class="context">
                      <template v-if="content.htmlType === 1">
                        <div class="table">
                          <div class="td">
                            <div class="table-item light">配件名称</div>
                            <div class="table-item light">物料编号</div>
                            <div class="table-item light">数量</div>
                          </div>
                          <div class="td">
                            <div class="table-item">对联题</div>
                            <div class="table-item">NO.1235454545</div>
                            <div class="table-item">999999</div>
                          </div>
                          <div class="td">
                            <div class="table-item">对联题</div>
                            <div class="table-item">NO.1235454545</div>
                            <div class="table-item">999999</div>
                          </div>
                        </div>
                      </template>
                      <template v-else-if="content.htmlType === 2">
                        <div class="detail-img-con">
                          <el-image
                            v-for="(img, index) in content.content"
                            class="detail-img"
                            :key="'content-' + index"
                            :src="img"
                            fit="contain"
                            :preview-src-list="content.content"
                          ></el-image>
                        </div>
                      </template>
                      <template v-else-if="content.htmlType === 4">
                        <div class="text-con">
                          <span
                            class="text"
                            v-for="(nameItem, nameIndex) in content.content"
                            :key="'name_' + nameIndex"
                            >{{ nameItem.name }}</span
                          >
                        </div>
                      </template>
                      <template v-else>
                        {{ content.content }}
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'detail',
  data() {
    return {
      dialogWorkVisible: false,
      // 工单详情数据
      detailInfo: {},
      // 状态数据
      stateList: [],
      stateTextList: ['创建工单', '指派工单', '接受工单', '完成工单', '取消工单', '修改工单'],
      stateBarList: ['创建', '指派', '接受', '完成', '取消', '修改']
    };
  }
};
</script>

<style lang="scss" scoped>
// 通用
.tright {
  text-align: right;
}
.light {
  color: #909399 !important;
}
.detail-img-con {
  display: flex;
  flex-wrap: wrap;
  .detail-img {
    width: 20%;
    margin-left: 10px;
  }
}

.dialog-con {
  height: 50vh;
  overflow: auto;
  .d-dialog-title {
    width: 100%;
    text-align: center;
    .name {
      color: #3378ff;
      font-size: 20px;
    }
    .number {
      color: #909399;
      font-size: 16px;
    }
  }
  .d-dialog-con {
    width: 100%;
    .con-info {
      background: #fafafa;
      margin: 30px 15px;
      padding: 10px 20px 20px 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .con-item {
        display: flex;
        width: 33%;
        align-items: center;
        margin-top: 10px;
        .title {
          color: #909399;
          font-size: 14px;
          display: block;
          width: 80px;
        }
        .val {
          color: #606266;
          font-size: 14px;
          padding-left: 10px;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .con-progress {
      width: 100%;
      .progress-btn {
        font-size: 14px;
        padding-bottom: 30px;
        .btn-txt {
          color: #3378ff;
          margin-left: 80px;
          display: inline-block;
          background: #fff;
          padding: 0 4px;
        }
        .btn-line {
          border-top: 1px solid rgba(180, 180, 180, 0.2);
          margin-top: -8px;
        }
      }
      .progress-text {
        display: flex;
        flex-direction: column;
        .progress-item {
          width: 60%;
          margin: 0 auto;
          display: flex;
          justify-content: flex-start;
          .p-con-state {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            .p-state {
              background: #67c23a;
              border-radius: 50px;
              width: 55px;
              height: 55px;
              text-align: center;
              color: #fff;
              font-size: 14px;
              line-height: 55px;
            }
            .p-line {
              width: 4px;
              height: calc(100% - 55px);
              background: #67c23a;
            }
          }
          .p-con {
            padding-top: 25px;
            padding-left: 10px;
            .p-con-title {
              display: flex;
              align-items: center;
              .time {
                color: #606266;
                font-size: 14px;
                padding-left: 10px;
              }
              .text {
                color: #909399;
                font-size: 14px;
                padding-left: 10px;
              }
            }
            .p-con-text {
              background: #f5f7fa;
              max-width: 585px;
              padding: 0px 20px 20px 20px;
              margin-top: 15px;
              .item {
                width: 100%;
                display: flex;
                padding-top: 15px;
                .title {
                  color: #909399;
                  font-size: 14px;
                  min-width: 60px;
                }
                .context {
                  color: #606266;
                  font-size: 14px;
                  text-align: left;
                  padding-left: 20px;
                  .table {
                    display: flex;
                    flex-direction: column;
                    min-width: 460px;
                    width: 460px;
                    .td {
                      display: flex;
                      border-top: 1px solid #ebeef5;
                      border-bottom: 1px solid #ebeef5;
                      border-right: 1px solid #ebeef5;
                    }
                    .table-item {
                      flex: 1;
                      border-left: 1px solid #ebeef5;
                      text-align: center;
                      padding: 10px;
                      color: #606266;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
